<template>
  <view>
    <uni-card>
      <view class="grid grid-cols-12">
        <view class="col-span-9 flex flex-col">
          <view class="text-black text-xl truncate">
            {{ expiry.name }}
          </view>
          <view class="text-sm text-gray-500">
            {{ expiry.barcode }}
          </view>
          <view class="flex ">
            <view class="text-sm text-gray-500">保质期：</view>
            <view class="text-sm text-gray-700">{{ expiry.shelfLife ? expiry.shelfLife + '天' : '-' }}</view>
          </view>
          <view class="flex ">
            <view class="text-sm text-gray-500">生产日期：</view>
            <view class="text-sm text-gray-700">{{ expiry.productionDate || '-' }}</view>
          </view>
          <view class="flex">
            <view class="text-sm text-gray-500">剩余保质期：</view>
            <view class="text-sm text-gray-700">
              <text v-if="MyDayjs(expiry.expiryDate).diff(MyDayjs(), 'days')===0">不足一天</text>
              <text v-else-if="MyDayjs(expiry.expiryDate).diff(MyDayjs(), 'days')<0">
                已过期{{ -MyDayjs(expiry.expiryDate).diff(MyDayjs(), 'days') }}天
              </text>
              <text v-else-if="!expiry.productionDate||!expiry.shelfLife">-</text>
              <text v-else>{{ MyDayjs(expiry.expiryDate).diff(MyDayjs(), 'days') }}天</text>
            </view>
          </view>
        </view>
        <view class="col-span-3 flex flex-col items-center justify-between ">
          <u-tag v-if="isExpired(expiry.expiryDate)" text="已过期" type="error"></u-tag>
          <u-tag v-else-if="isWarning(expiry.warningDate)" text="快过期" type="warning"></u-tag>
          <u-tag v-else-if="!expiry.productionDate||!expiry.shelfLife" text="无效"></u-tag>
          <u-tag v-else text="正常" type="success"></u-tag>
          <view v-if="selected===expiry">
            <u-button @click="handleManage" size="mini">管理</u-button>
          </view>

        </view>
      </view>
    </uni-card>
  </view>
</template>

<script setup lang="ts">

import {computed, type PropType} from "vue";
import MyDayjs from "@/utils/common/myDayjs";

const props = defineProps({
  expiry: {
    type: Object as PropType<IExpiry>,
    default: () => {
    }
  },
  selected: {
    type: Object as PropType<IExpiry>,
    default: () => {
    }
  },
})
const emits = defineEmits(['manage'])


const handleManage = () => {
  emits('manage', props.expiry)
}

const isExpired = (expiryDate: any) => {
  return MyDayjs(expiryDate).diff(MyDayjs(), 'days') < 0
}

const isWarning = (warningDate: any) => {
  return MyDayjs(warningDate).diff(MyDayjs(), 'days') < 0
}

</script>

<style scoped>

</style>